import { PrecastOC, precastCamera, precastRender, mountLight, mountGround, moundGrid, mountAxes } from 'plugin/envRender.js'
import { ModelLoader } from 'plugin/LoadModel.js'
import TaDiao from 'plugin/sampleTD.js'
// 创建场景
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xf3f4f6);

// 创建相机
const camera = precastCamera()

// 创建渲染器
const renderer = precastRender()

// 添加轨道控制器
const controls = PrecastOC(camera, renderer.domElement)

// 添加光源
mountLight(scene)
// 添加地面
mountGround(scene)
// 网格
moundGrid(scene)
// 坐标轴
mountAxes(scene)


// 异步获取数据，模拟接口数据
function getData() {
    return new Promise((resolve, reject) => {
        resolve([
            // lzHeight: 立柱高度  bcLen: 臂长长度
            { id: 1, x: -50, y: 0, z: -60, lzHeight: 50, bcLen: 30 },
            { id: 2, x: 50, y: 0, z: 50, lzHeight: 70, bcLen: 30 },
            // { id: 3, x: 0, y: 0, z: 0, lzHeight: 70, bcLen: 60 },
        ])
    })
}
// 异步获取模型
const modelLoader = new ModelLoader();
console.log('准备加载')
await modelLoader.load()
console.log('加载完成')
let td1 = new TaDiao(modelLoader.getModel(0), modelLoader.getModel(1))
// let td2 = new TaDiao(modelLoader.getModel(0), modelLoader.getModel(1))
// let td3 = new TaDiao(modelLoader.getModel(0), modelLoader.getModel(1))


let td4 = new TaDiao(modelLoader.getModel(2), modelLoader.getModel(3), modelLoader.getModel(4), modelLoader.getModel(5), modelLoader.getModel(6), modelLoader.getModel(7))
let td5 = new TaDiao(modelLoader.getModel(2), modelLoader.getModel(3), modelLoader.getModel(4), modelLoader.getModel(5), modelLoader.getModel(6), modelLoader.getModel(7))
let td6 = new TaDiao(modelLoader.getModel(2), modelLoader.getModel(3), modelLoader.getModel(4), modelLoader.getModel(5), modelLoader.getModel(6), modelLoader.getModel(7))
// console.log(modelLoader.getModel(2))

// 参数: x，y，塔高，臂长
td4.loadMoudel(-50, -100, 50, 30);
td5.loadMoudel(50, 100, 40, 30);
td6.loadMoudel(30, 70, 70, 50);
td4.draw(scene)
td5.draw(scene)
td6.draw(scene)
// console.log(td4)


// td1.loadMoudel(10, 10, 20, 15);
// td2.loadMoudel(10, 40, 30, 15);
// td3.loadMoudel(40, 10, 40, 15);
// td1.draw(scene)
// td2.draw(scene)
// td3.draw(scene)
// 创建 Canvas 元素
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 600;

// 定义属性和值
const properties = [
    { name: '属性1', value: '值1', color: '#FF0000' },
    { name: '属性2', value: '值2', color: '#00FF00' },
    { name: '属性3', value: '值3', color: '#0000FF' },
    { name: '属性4', value: '值4', color: '#FFFF00' },
    { name: '属性5', value: '值5', color: '#FF00FF' },
    { name: '属性6', value: '值6', color: '#00FFFF' },
    { name: '属性7', value: '值7', color: '#800080' },
    { name: '属性8', value: '值8', color: '#008000' },
    { name: '属性9', value: '值9', color: '#808000' }
];

// 设置字体样式
ctx.font = '24px Arial';
ctx.fillStyle = 'rgba(0,0,255)'
ctx.fillRect(0, 0, 800, 600)
// 绘制属性和值
for (let i = 0; i < properties.length; i++) {
    const row = Math.floor(i / 3);
    const col = i % 3;
    const x = 50 + col * 250;
    const y = 50 + row * 190;

    // 绘制纯色色块
    ctx.fillStyle = properties[i].color;
    ctx.fillRect(x, y - 15, 20, 20);

    // 绘制属性和值
    ctx.fillStyle = 'white';
    ctx.fillText(`${properties[i].name}: ${properties[i].value}`, x + 30, y);
}

// 创建 Canvas 纹理
const texture = new THREE.CanvasTexture(canvas);

// 创建平面几何体
const geometry = new THREE.PlaneGeometry(4, 3);
// 创建材质
const material = new THREE.MeshBasicMaterial({ map: texture, transparent: true, opacity: 0.9 });
// 创建网格
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(50, 47, 100)
mesh.scale.set(2, 2, 2)
// 将网格添加到场景中
scene.add(mesh);

let clock = new THREE.Clock();


function animate() {

    requestAnimationFrame(animate);

    if(clock.getElapsedTime() >= 0.04){
        clock.start();
        console.log("1")
            td4.animate()
    td5.animate()
    // 计算摄像机在地面的投影位置
    const cameraProjectionOnGround = new THREE.Vector3(camera.position.x, 47, camera.position.z);
    // 让面板看向摄像机在地面的投影
    mesh.lookAt(cameraProjectionOnGround);
    td6.animate()
    // 可以滑动和滚动 
    controls.update();
    renderer.render(scene, camera);
    }else {
        console.log(clock.getElapsedTime())
    }
    // console.log(, clock.getDelta())
    
    
    // td1.animate()

}

animate()